<template>
  <div class="picker">
    <van-cell value="添加习惯" />
    <van-field v-model="habitName" label="习惯"  placeholder="请输入习惯名" />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" @click="submit">
        提交
      </van-button>
    </div>


    <van-cell title="选择单个日期" :value="rqdate" @click="show = true" />
    <van-calendar v-model="show" @confirm="rqonConfirm" />

    <van-cell value="添加任务" />
    <van-field
      readonly
      clickable
      label="习惯"
      :value="value"
      placeholder="选择习惯"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="habitNameList"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-field v-model="taskName" label="任务名字"  placeholder="请输入任务名字" />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" @click="submitTask">
        提交
      </van-button>
    </div>

    <van-cell value="卡片" />
    <van-field
      readonly
      clickable
      label="习惯"
      :value="value"
      placeholder="选择习惯"
      @click="showPicker = true"
      value-key="text"
      @confirm="onConfirm()"
      @cancel="onCancel"
      @change="onChange"
    />
    <van-field v-model="title" label="卡片标题"  placeholder="请输入卡片标题" />
    <van-field v-model="transcript" label="卡片描述"  placeholder="请输入描述" />
    <van-field v-model="content" label="卡片内容"  placeholder="请输入卡片内容" />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" @click="submitCard">
        提交
      </van-button>
    </div>
  </div>


</template>

<script>
import {request} from "../network/request";
import { Toast } from 'vant';
export default {
  name: 'Picker',
  data () {
    return {
      show:false,
      rqdate:'',
      a:'dddd',
      id:'',
      value2:'',
      value: '',
      showPickercp :false,
      showPicker: false,
      msg: 'Welcome to Your Vue.js App',
      habitName: '',
      tel:'',
      taskName: '',
      digit: '',
      number: '',
      password: '',
      columns: [],
      habitNameListcp:[{ "keyId": 2, "text": "测试1" },
        { "keyId": 10, "text": "测试2" },
        { "keyId": 31, "text": "测试3" }],
      habitNameList:[],
      title:'',
      transcript:'',
      content:''
    }
  },
  created: function () {
    // `this` 指向 vm 实例  /habit/getHabitList
    console.log('a is: ' + this.a);
    this.getHabitList();
  },

  methods:{

    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    rqonConfirm(date) {
      this.show=false;
      this.rqdate = this.formatDate(date);
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      Toast('取消');
      console.log('取消');
    },
    onConfirm(value) {
      // console.log(value);
      this.value = value.text;
      this.id = value.keyId;
      console.log(this.value+"---"+this.id);
      this.showPicker = false;
      // this.showPickercp=false;
    },

    submit(){   //添加习惯
      request({
        url: '/habit/addHabit',
        method:'post',
        data: { habitName: this.habitName},
      }).then(res => {
        console.log(res);
        this.habitName='';
        this.getHabitList();
      }).catch(err => {
        console.log(err);
      })
    },
    getHabitList(){  //获取习惯列表
      request({
        url: '/habit/getHabitbyPriority',
        method:'post'
      }).then(res => {
        console.log(res);
        res.data.map(item=>this.habitNameList.push({"keyId":item.id,"text":item.habitName}));

        // this.habitNameList=res.data;
      }).catch(err => {
        console.log(err);
      })
    },
    submitTask(){
      request({
        url: '/task/addTask',
        method:'post',
        data: { taskName: this.taskName
        ,habitId:this.id},
      }).then(res => {
        console.log(res);
        this.taskName='';
      }).catch(err => {
        console.log(err);
      })
    },
    submitCard(){
      request({
        // url: '/card/addCard',
        url: '/card/addCardByHabit',
        method:'post',
        data: { title: this.title,
          transcript: this.transcript,
          content: this.content,
        id:this.id},
      }).then(res => {
        console.log(res);
        this.title='';
        this.transcript='';
        this.content='';
      }).catch(err => {
        console.log(err);
      })
    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.picker{
  margin-bottom:100px;
}
</style>
